<template>
  <div v-if="showDeployDialog">
    <el-dialog
      title="部署YAML"
      :visible.sync="showDeployDialog"
      width="900px"
      :destroy-on-close="true"
      :before-close="beforeCloseDialog"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <div>
        <el-form
          :model="deployCloudYamlInfo"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <div style="width: 95%">
            <el-row>
              <el-col :span="12">
                <el-form-item label="部署名称" prop="yamlDeployName">
                  <el-input
                    v-model="deployCloudYamlInfo.yamlDeployName"
                    style="width: 100%"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="名称" prop="yamlName">
                  <el-input
                    v-model="deployCloudYamlInfo.yamlName"
                    style="width: 100%"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div style="width: 95%">
            <el-row>
              <el-col :span="12">
                <el-form-item label="版本" prop="yamlVersion">
                  <el-input
                    v-model="deployCloudYamlInfo.yamlVersion"
                    style="width: 100%"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="命名空间" prop="namespace">
                  <el-input
                    v-model="namespace"
                    style="width: 100%"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div style="width: 95%">
            <el-row>
              <el-col :span="12">
                <el-form-item label="镜像名称" prop="yamlImages">
                  <el-input
                    v-model="deployCloudYamlInfo.yamlImages"
                    style="width: 100%"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="描述" prop="yamlDescription">
                  <el-input
                    type="textarea"
                    v-model="deployCloudYamlInfo.yamlDescription"
                    style="width: 100%"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <el-form-item>
            <div style="display: flex; justify-content: right; width: 95%;">
              <el-button
                type="primary"
                @click="submitForm()"
                class="el-button-primary-style"
              >部署
              </el-button>
              <el-button
                @click="beforeCloseDialog(null)"
                type="primary"
                class="el-button-primary-style"
                style="margin-right: 10px;"
              >取消
              </el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {getTenantId} from "@/utils/tenantId";

  export default {
    name: "ImportCloudYaml",
    props: ["tmpGvCloudYamlInfo"],
    data() {
      return {
        showDeployDialog: false,
        openAttentionDialog: false,
        namespace: "",
        deployCloudYamlInfo: {
          yamlDeployName: "",
          yamlDeployType: "",
          yamlName: "",
          yamlZhname: "",
          yamlVersion: "",
          yamlDescription: "",
          yamlImages: "",
          yamlContent: "",
          yamlInterface: "",
        },
        rules: {
          yamlDeployName: [
            {required: true, message: "请输入名称", trigger: "blur"},
            {
              min: 3,
              message: "请输入至少三位",
              trigger: "blur",
            },
            {
              min: 3,
              max: 20,
              message: "输入名称过长",
              trigger: "blur",
            },
            {
              pattern: /^[a-zA-Z]([a-zA-Z0-9])*$/,
              message: "只包含字母、数字，且以字母开头",
              trigger: ["blur", "change"],
            },
          ],
          // yamlName: [
          //   {required: true, message: '请输入名称', trigger: 'blur'},
          //   {min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur'},
          //   {
          //     pattern: /^[a-zA-Z]([a-zA-Z0-9])*$/,
          //     message: "标识只能包含字母、数字，且只能以字母开头",
          //     trigger: ["blur", "change"],
          //   },
          // ],
          // yamlVersion: [
          //   {required: true, message: '请输入yaml版本', trigger: 'blur'},
          //   {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'},
          //   {
          //     pattern: /^[a-zA-Z0-9]([a-zA-Z0-9.])*$/,
          //     message: "版本只能包含字母、数字、点，且只能以字母数字开头",
          //     trigger: ["blur", "change"],
          //   },
          // ],
          // yamlImages: [
          //   {required: true, message: '请输入yaml镜像名称', trigger: 'blur'},
          //   {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'},
          //   {
          //     pattern: /^[a-z0-9]([a-z0-9./:])*$/,
          //     message: "镜像名称非法",
          //     trigger: ["blur", "change"],
          //   },
          // ],
          // yamlDescription: [
          //   {required: true, message: '请输入yaml名称', trigger: 'blur'},
          //   {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
          // ],
        },
      };
    },
    methods: {
      submitForm() {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            // deploy 逻辑
            this.$appManageApi.deployCloudYaml(this.deployCloudYamlInfo).then((res) => {
              if (res && res.code === 200) {
                this.$message.success("部署成功");
                this.beforeCloseDialog(null);
                this.$appManageApi.startCloudYaml([res.data]).then((res) => {
                  if (res && res.code === 200) {
                    this.$message.success(res.data);
                  }
                });
                this.$router.push({
                  name: "CloudNativeManage",
                  // query: { code: res.data },
                });
              }
            });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      beforeCloseDialog(done) {
        this.showDeployDialog = false;
        this.deployCloudYamlInfo = {
          yamlDeployName: "",
          yamlDeployType: "",
          yamlName: "",
          yamlZhname: "",
          yamlVersion: "",
          yamlDescription: "",
          yamlImages: "",
          yamlContent: "",
          yamlInterface: "",
        };
        this.$emit("closeDeployDialog");
        if (done !== null) {
          done();
        }
      },
    },
    beforeMount() {
      this.$tenantManageApi
        .getTenantNameById(getTenantId())
        .then((response) => {
          this.namespace = response.data;
          this.$store.dispatch("cloudYaml/namespaceUpdate", this.namespace);
        })
        .catch((error) => {
          console.error(error);
        });
      console.log(this.deployCloudYamlInfo);
      this.deployCloudYamlInfo.yamlImages = this.tmpGvCloudYamlInfo.yamlImages;
      this.deployCloudYamlInfo.yamlName = this.tmpGvCloudYamlInfo.yamlName;
      this.deployCloudYamlInfo.yamlZhname = this.tmpGvCloudYamlInfo.yamlZhname;
      this.deployCloudYamlInfo.yamlVersion = this.tmpGvCloudYamlInfo.yamlVersion;
      this.deployCloudYamlInfo.yamlDescription = this.tmpGvCloudYamlInfo.yamlDescription;
      this.deployCloudYamlInfo.yamlContent = this.tmpGvCloudYamlInfo.yamlContent;
      this.deployCloudYamlInfo.yamlInterface = this.tmpGvCloudYamlInfo.yamlInterface;
    },
    // beforeDestroy() {
    //   console.log(111);
    // }
  };
</script>

<style scoped>
</style>
